#area-pages-tab {
  @extend .kv-bg-white, .kv-p-4;

  border-radius: 12px;

  .kv-admin-button {
    @extend .kv-py-1, .kv-px-3;

    background-color: $gray-200;

    border-radius: 5px;
    border: none;

    &.kv-area-module-cancel,
    &.kv-area-module-save, {
      @extend .kv-py-2, .kv-px-4;
    }

    &.kv-area-module-cancel, {
      color: rgb(0, 115, 170);
    }

    &.kv-area-module-save, {
      background-color: rgb(0, 115, 170);
      color: $white;
    }

    &.dropdown {
      @extend .kv-bg-white, .kv-d-flex, .kv-py-0, .kv-px-2;

      align-items: center;

      border: 1px solid $gray-200;

      line-height: 1.5;
      height: 100%;

      .icon-left,
      .label {
        @extend .kv-mr-2;
      }

      .icon {
        font-size: 0.5em;
      }
    }
  }

  .area-pages-input {
    @extend .kv-py-2, .kv-px-3, .kv-d-flex;

    align-items: center;
    align-content: center;

    max-width: 16em;

    background-color: $gray-200;
    border-radius: 9999px;

    .area-pages-input-field {
      @extend .kv-p-0, .kv-m-0, .kv-w-100;

      line-height: 1.5;

      &, &:focus, &:hover, &:active {
        background: none;
        box-shadow: none;
        outline: none;
        border: none;
      }
    }

    .area-pages-input-icon {
      @extend .kv-ml-2;
    }
  }

  .area-pages-header,
  .area-pages-content {
    @extend %kv-col-md-12;
  }

  .area-pages-header {
    @extend .kv-row, .kv-mb-4, .kv-w-100;

    .area-pages-modules-go-back,
    .area-pages-modules-heading,
    .area-pages-areas-heading {
      @extend %kv-col-md-10;
    }

    .area-pages-modules-go-back {
      @extend .kv-mb-3;
    }

    .back-to-area-pages {
      text-decoration: none;
      color: lightskyblue;
    }

    .back-to-area-pages:hover {
      text-decoration: none;
      color: lightblue;
    }

    h2 {
      @extend .kv-m-0, .kv-p-0;

      font-size: 1.5em;
      font-weight: 400;
      line-height: 1.3;
    }
  }

  .area-pages-container {
    @extend .kv-w-100, .kv-container;

    border: 1px solid #ccc;
    border-radius: 12px;

    overflow: hidden;
  }

  .area-pages-list-header {
    @extend .kv-container;

    .area-pages-list-search,
    .area-pages-list-options {
      @extend .kv-py-3;
    }

    .area-pages-list-search {
      @extend %kv-col-md-8;


    }

    .area-pages-list-options {
      @extend %kv-col-md-4, .kv-d-flex;

      align-items: center;
      justify-content: flex-end;

      text-align: right;

      #area-pages-list-set-rows {
        border: none;
        background: none;
        appearance: none;
        box-shadow: none;
        padding:0;
      }
    }
  }

  .area-pages-list-headings {
    @extend .kv-row, .kv-py-3, .kv-px-4, .kv-bold;

    background-color: $gray-200;

    .area-active {
      @extend %kv-col-md-1;
    }

    .area-name {
      @extend %kv-col-md-5;
    }

    .area-type {
      @extend %kv-col-md-2;
    }

    .area-active-modules {
      @extend %kv-col-md-2;
    }

    .area-edit-remove {
      @extend %kv-col-md-2;
    }
  }
}

@import './area-pages/area-pages-list';
@import './area-pages/area-pages-modules-list';
@import './area-pages/area-pages-edit-module';