.wpdesk-ideas-submit-button {
  background-color: var(--ideas-primary-color);
  color: contrast-color(var(--ideas-primary-color));
}

#ideas {
  --ideas-primary-color: #50c878;
  inline-size: 100%;
  max-inline-size: 800px;
  margin-inline: auto;
  padding-inline: 0;

  .filters {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    gap: 3%;
    margin-block-end: 60px;

    > * {
      inline-size: 100%;
      min-inline-size: 0;
      margin: 0;
    }

    .select-wrap {
      position: relative;

      &::before {
        position: absolute;
        inset-block-start: calc(50% - 15px);
        inset-inline-end: 24px;
        content: "";
        font-family: var(--fa-style-family, "Font Awesome 6 Free");
        font-weight: 900;
      }

      select {
        inline-size: 100%;
        border: 2px solid #ddd;
        padding-inline-end: 48px;
      }
    }
  }

  .content {
    & > .idea {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      align-items: start;
      column-gap: 20px;
      margin-block-end: 40px;

      &::before, &::after {
        display: none;
      }

      .entry-header {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px 10px;
        margin-block-end: 20px;
      }

      .entry-title {
        margin-block: 0;
        padding-block: 0;
        text-align: start;
      }

      .status {
        margin: 0;
        padding-block: 4px;
        padding-inline: 8px;
        border-radius: 3px;
        background-color: var(--ideas-status-color, #ddd);
        color: contrast-color(var(--ideas-status-color, #ddd));
        text-transform: uppercase;
        font-weight: bold;
        font-size: 12px;
        font-family: "PT Sans", "system-ui", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
        transition: background-color .2s, color .2s;

        &.idea {
          --ideas-status-color: #e02f36;
        }

        &.planned {
          --ideas-status-color: #cc4b00;
        }

        &.in-progress {
          --ideas-status-color: #0059b3;
        }

        &.completed {
          --ideas-status-color: #008758;
        }
      }

      .idea-content {
        min-inline-size: 0;
        overflow-wrap: anywhere;
      }

      .vote {
        grid-column: 1;
        grid-row: 1;

        .vote-button {
          inline-size: 52px;
          padding-block: 12px;
          padding-inline: 12px;
          border: 1px solid #ddd;
          border-radius: 3px;
          background-color: #fff;
          box-shadow: none;
          color: var(--ideas-primary-color);
          text-align: center;
          letter-spacing: normal;
          transition: background-color .2s, border-color .2s, color .2s;

          &:hover,
          &:focus {
            border-color: var(--ideas-primary-color);
          }

          &.voted {
            background-color: var(--ideas-primary-color);
            color: #fff;
          }

          .icon {
            display: block;
            margin-block-end: 6px;
          }
        }
      }
    }
  }
}

@media (max-width: 600px) {
  #ideas {
    .filters {
      grid-template-columns: 1fr;
      gap: 12px;
      margin-block-end: 40px;
    }

    .content {
      .idea {
        grid-template-columns: 1fr;
        row-gap: 16px;
      }
    }
  }
}