@import "../../mixins";

.data-sidebar {
  & .dataset-list-container {
    background-color: var(--light-1);
    margin: calc(var(--gutter) / 2) 0;
    width: 100%;
    padding: calc(var(--gutter) / 2);
    @add-mixin body-font;
    & h2 {
      color: var(--white);
      @add-mixin body-font;
    }
    & .dataset {
      margin-bottom: calc(var(--gutter) / 2);
      @add-mixin body-font;
      & .dataset-index {
        color: var(--light-3);
        display: block;
        padding-bottom: calc(var(--gutter) / 6);
      }
      & .dataset-name-action {
        display: flex;
        justify-content: space-between;
        flex-direction: row;
        & .dataset-name {
          color: var(--dark-3);
          width: 90%;
        }
        & .dataset-delete {
          width: 10%;
          cursor: pointer;
          margin: 2px;
          & img {
            width: 100%;
          }
        }
      }
      & .source-note {
        padding: calc(var(--gutter) / 4) 0;
      }
    }
  }
  & .map-csv-btn {
    display: block;
    text-align: center;
    background-color: var(--light-1);
    margin: calc(var(--gutter) / 2) 0;
    width: 100%;
    padding: calc(var(--gutter) / 2);
    color: var(--light-3);
    text-transform: uppercase;
    transition: background-color 0.5s, color 0.5s;
    text-decoration: none;
    @add-mixin body-font;
    &:hover {
      background-color: var(--accent);
      color: var(--white);
    }
  }
}
