@use "variables";

aside {
  background-color: variables.$white;
  border-right: 1px solid variables.$grey-30;
  padding-top: variables.$bt-header-height;

  > .close {
    display: none;
    position: absolute;
    top: 1.3em;
    right: 1.3em;

    path {
      transition: fill 0.4s ease-in-out;
    }

    &:hover {
      path {
        fill: variables.$berta-accent;
      }
    }
  }

  &.fullscreen {
    > .close {
      display: block;
    }
  }
}

.setting-group {
  transition: background-color 0.2s;

  h3 {
    align-items: center;
    border-bottom: 1px solid variables.$grey-10;
    color: variables.$black;
    display: flex;
    font-size: 1em;
    font-weight: normal;
    justify-content: space-between;
    margin: 0;
    outline: none;
    padding: 1.3em;
    transition: color 0.2s;

    .url-line {
      font-size: variables.$input-font-size;
      margin-top: 0.5em;

      a {
        color: variables.$black;
        text-decoration: none;
      }

      &:hover {
        span,
        a {
          color: variables.$berta-accent;
          cursor: pointer;
        }
      }
    }

    input {
      background-color: transparent;
      border: 0;
      font-family: AvenirNext, Helvetica, Arial, sans-serif;
      font-size: 1em;
      outline: none;
      padding: 0;
      transition: color 0.2s;

      &:focus {
        color: variables.$berta-accent;
      }
    }

    button {
      background: none;
      border: 0;
      color: variables.$black;
      cursor: pointer;
      margin-left: 0.8rem;
      padding: 0;
      transition: color 0.2s;

      svg {
        path {
          fill: variables.$black;
          transition: fill 0.2s;
        }
      }

      &:hover,
      &.active {
        color: variables.$berta-accent;

        svg {
          path {
            fill: variables.$berta-accent;
          }
        }
      }

      &.delete {
        &:hover,
        &.active {
          svg {
            path {
              fill: variables.$error-color;
            }
          }
        }
      }
    }

    .drop-icon {
      transition: transform 0.2s;

      path {
        stroke: variables.$black;
        transition: stroke 0.2s;
      }
    }

    .edit-icon {
      cursor: pointer;
      margin-left: 0.5rem;
      max-height: 0.8em;

      .icon {
        transition: fill 0.2s;
      }

      &:hover {
        .icon {
          fill: variables.$berta-accent;
        }
      }
    }

    &.hoverable {
      cursor: pointer;

      &:hover {
        color: variables.$berta-accent;

        .drop-icon {
          path {
            stroke: variables.$berta-accent;
          }
        }
      }
    }
  }

  h4 {
    border-top: 1px solid variables.$grey-10;
    color: variables.$black;
    font-size: 0.9em;
    font-weight: normal;
    margin: 0;
    padding-top: 1.3em;
  }

  &:first-child {
    h3 {
      border-top: 0;
    }
  }

  > .settings {
    overflow: hidden;

    berta-setting,
    .setting {
      margin: 1.3em;

      p {
        &:first-child {
          margin-top: 0;
        }
      }

      .button {
        font-size: variables.$input-font-size;
      }

      &:first-child {
        margin-top: 0;

        h4 {
          border-top: 0;
          padding-top: 0;
        }
      }
    }

    .input-row {
      > berta-setting {
        margin: 0;
      }
    }
  }

  .card {
    background-color: variables.$white;
    border: 1px solid variables.$grey-10;
    border-radius: variables.$border-radius;
    box-sizing: border-box;
    color: variables.$grey-80;
    margin: 1.3em 0;
    padding: 0.5em 1em;
  }

  table {
    border-collapse: collapse;
    font-size: variables.$input-font-size;
    width: 100%;

    th,
    td {
      padding: 0.5em;
      text-align: left;

      &:first-child {
        padding-left: 0;
      }

      &:last-child {
        padding-right: 0;
      }
    }

    tr:not(:first-child) {
      border-top: 1px solid variables.$grey-10;
    }
  }

  .setting-description {
    color: variables.$grey-40;
    font-size: variables.$input-font-size;
    margin-top: 1em;

    a {
      color: variables.$grey-40;
    }
  }

  &.is-expanded {
    background-color: variables.$grey-1;

    h3 {
      border-bottom: 0;

      .drop-icon {
        transform: scaleY(-1);

        path {
          stroke: variables.$berta-accent;
        }
      }

      &:hover {
        color: variables.$black;
      }
    }

    > .settings {
      border-bottom: 1px solid variables.$grey-10;
    }
  }

  &.active {
    background-color: variables.$grey-1;
  }
}
