.settings {
  .inner {
    padding: 0 !important;
    width: 100%;

    $time: 300ms;

    @mixin transition {
      transition: all $time ease;
    }

    h3 {
      margin: 3rem 0;
    }

    p {
      margin: 1rem 0;
    }

    .card {
      display: block;
      width: 100%;
      margin: auto;
      margin-bottom: 2rem;

      &__header {
        padding: 2rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      &__body {
        padding: 5%;

        @media screen and (max-width: 900px) {
          padding: 5rem 0;
        }
      }
    }

    .container {
      display: flex;
      width: 100%;
      flex-wrap: wrap;
      flex-direction: row;
      justify-content: space-between;

      @media screen and (max-width: 900px) {
        flex-direction: column;
      }

      .fo-settings-button {
        background-color: $color-primary;
        color: #fff;
        border: 0;
        cursor: pointer;
        font-size: 15px;
        padding: 10px 30px;
        margin: 5px;
        border-radius: 3px;
      }

      .fo-settings-button:hover {
        opacity: 0.8;
      }

      .close__settings {
        padding-right: 2rem;
        font-size: 30px;
        position: absolute;
        top: 0;
        right: 0;
      }
    }

    .grid {
      flex: 1;
      padding-left: 2rem;
      padding-right: 2rem;
      position: relative;

      @media screen and (max-width: 900px) {
        padding-left: 1rem;
        padding-right: 1rem;
      }

      .video__upload__progress {
        width: 100%;
        margin: 50px 0;
        border-radius: 5px;
        background-color: #1e2124;

        .upload__progress {
          position: relative;
          border-radius: 5px;
          background-color: $color-theme;
          box-shadow: 0px 0px 10px $color-theme;
          height: 0;
          padding: 2px 0;
          text-align: center;
          -webkit-transition: width 1s;
          transition: width 1s;

          &.done {
            background-color: $color-active;
            box-shadow: 0px 0px 10px $color-active;
          }
        }
      }

      .video__thumbnails {
        width: 190px;
        height: 115px;
        cursor: pointer;
        display: inline-block;
        margin: 5px;
        background-color: rgb(201, 201, 201);

        &.selected {
          opacity: 0.8;
          border: 2px dotted dodgerblue;
        }
      }

      .upload__video__settings {
        .video__description,
        .video__tags,
        .video__title {
          padding-top: 20px;

          textarea,
          input {
            padding: 10px;
            width: 100%;
            margin: 10px 0;
            border-radius: $radius;
            border: 1px solid lightgray;
            font-size: 16px;

            &:not([type='submit']) {
              margin-bottom: 20px;

              &:hover {
                border-color: rgba(0, 0, 0, 0.2);
              }

              &:focus,
              &:active {
                border-color: $color-special;
              }
            }
          }
        }
      }

      .account__info {
        display: flex;
        width: 100%;
        flex-wrap: wrap;
        flex-direction: row;
        background-color: white;
        color: black !important;
        border: 1px solid lightgrey;
        padding: 20px;
        border-radius: 5px;

        .account__avatar {
          width: 80px;
          height: 80px;
          cursor: pointer;
          border-radius: 50%;

          &:hover {
            opacity: 0.8;
          }
        }

        .email__info {
          margin-left: 20px;
          display: block;
          flex: 1;
        }
      }

      @media screen and (max-width: 900px) {
        max-width: 100%;
      }
    }

    .toggle {
      $toggleWidth: 60px;
      $toggleHeight: 30px;
      $toggleMargin: 4px;
      $toggleHandleSize: $toggleHeight - ($toggleMargin * 2);
      max-width: $toggleWidth;
      height: $toggleHeight;
      background: $color-special;
      border-radius: 999px;
      position: relative;
      @include transition;
      cursor: pointer;

      &__handle {
        height: $toggleHandleSize;
        width: $toggleHandleSize;
        position: absolute;
        top: 50%;
        left: $toggleMargin;
        transform: translateY(-50%);
        background: white;
        border-radius: 50%;
        @include transition;
      }

      &.is-on {
        background: white;
        @include transition;

        .toggle__handle {
          left: ($toggleWidth - $toggleMargin) - $toggleHandleSize;
          background: $color-special;
          @include transition;
        }
      }
    }

    .form-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 1.5rem;
      flex-wrap: wrap;

      &__control {
        width: 40%;
        text-align: right;
      }

      &__control__input {
        height: 1.9rem;
        padding: 0 0.5rem;
        border: 1px solid lightgrey;
        font-family: inherit;
        // background: #1e2124;
        border-radius: 0.25rem;
      }
    }

    .control {
      background: transparent;
      color: inherit;
      display: block;
      cursor: pointer;
      width: 100%;
      border-radius: 0.3rem;
      padding: 0.4rem;

      option {
        color: black;
      }
    }
  }
}
