.wallpaper-switcher {
  min-width: 1400px;
  min-height: 150px;
  @extend .module;
  padding: 10px;
  border-radius: 50px;
  border: 1px solid $secondary;

  .workspace-wallpaper {
    transition: all 0.5s;
    border: none;

    background-size: 400px;
    background-position: center;
    background-repeat: no-repeat;

    min-width: 100px;
    min-height: 100px;
    border-radius: 50%;

    padding: 0px;
    margin: 0px;

    &:hover {
      min-height: 100px;
      min-width: 200px;
      background-position: center;
      background-repeat: no-repeat;
      border-radius: 20px;
    }

    &.focused {
      min-height: 150px;
      min-width: 150px;
      &:hover {
        min-height: 150px;
        min-width: 300px;
        border-radius: 50px;
      }
    }

    &:active {
      box-shadow: 0px 0px 20px 100px $background inset;
      transition: all 0.2s;
    }
  }

  .actions {
    .selected-workspace {
      color: $secondary;
      border-radius: 50px;
    }
    .targets {
      button {
        border-radius: 0px;
      }
      button:first-child {
        border-radius: 50px 0px 0px 50px;
      }
      button:only-child {
        border-radius: 0px;
      }
      button:last-child {
        border-radius: 0px 50px 50px 0px;
      }
    }
  }

  .all-wallpapers-scrollable {
    padding: 0px 50px;
    border-radius: 10px;
    min-height: 75px;
  }

  .all-wallpapers {
    padding: 0px;
    margin: 0px;
    .wallpaper-event-box {
      &:hover .wallpaper {
        min-width: 125px;
        background-position: center;
        border-radius: 20px;
      }
    }
    .wallpaper {
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;

      min-width: 75px;
      min-height: 75px;
      border-radius: 10px;

      .delete-wallpaper {
        @extend .danger;
        margin: 5px;
        padding: 0px;
      }
    }
  }
}
